import { useState } from 'react'
import { login } from '@/api/user'
import './index.less'

const LoginForm = () => {
  const [phone, setPhone] = useState('13890943822')
  const [password, setPassword] = useState('ll1161856555LL')

  const onFinish = () => {
    if (phone && password) {
      login({ phone, password }).then(res => {
        const token = res.token
        localStorage.setItem('token', token)

      })

    }
  }
  return (
    <div className='login-form'>
      <h1>登录</h1>
      <div className='form'>
        <div className='form-item'>
          <label htmlFor=''>账号</label>
          <input value={phone} onChange={e => setPhone(e.target.value)} type='text' />
        </div>
        <div className='form-item'>
          <label htmlFor=''>密码</label>
          <input value={password} onChange={e => setPassword(e.target.value)} type='password' />
        </div>
        <div className='form-item'>
          <button onClick={onFinish}>登录</button>
        </div>
      </div>
    </div>
  )
}

export default function Login() {
  return (
    <div className='login'>
      <LoginForm />
    </div>
  )
}
